﻿@page "/datagrid/context-menu"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the usage of context menu in the DataGrid component. Right click anywhere on the DataGrid to view context menu.</p>
</SampleDescription>
<ActionDescription>
    <p>DataGrid has options to show the context menu when right clicking on it. To configure the items in context menu, you should define either default or custom item in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ContextMenuItems'>ContextMenuItems</a></code> property. Each item will be shown based on its target. The default context menu items are,</p>
    <ul>
        <li><strong>Edit</strong> - Edit the current record.</li>
        <li><strong>Delete</strong> - Delete the current record.</li>
        <li><strong>Save</strong> - Save the edited record.</li>
        <li><strong>Cancel</strong> - Cancel the edited state.</li>
        <li><strong>Copy</strong> - Copy the selected records.</li>
        <li><strong>PdfExport</strong> - Export the DataGrid as Pdf format.</li>
        <li><strong>ExcelExport</strong> - Export the DataGrid as Excel format.</li>
        <li><strong>CsvExport</strong> - Export the DataGrid as CSV format.</li>
        <li><strong>SortAscending</strong> - Sort the current column in ascending order.</li>
        <li><strong>SortDescending</strong> - Sort the current column in descending order.</li>
        <li><strong>FirstPage</strong> - Go to the first page.</li>
        <li><strong>PrevPage</strong> - Go to the previous page.</li>
        <li><strong>LastPage</strong> - Go to the last page.</li>
        <li><strong>NextPage</strong> - Go to the next page.</li>
    </ul>
    <p>While using the DataGrid in a touch environment, touch and hold the DataGrid row cell to show the context menu.</p>
    <p>In this demo, Context Menu feature is enabled by defining the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ContextMenuItems'>ContextMenuItems</a></code> property with the default items.</p>
    <p>More information on the context menu feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/context-menu/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" AllowSorting="true" AllowExcelExport="true" AllowPdfExport="true" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel","PdfExport", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})" AllowPaging="true">
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  IsPrimaryKey="true" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" EditType="EditType.DatePickerEdit" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="160"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" EditType="EditType.NumericEdit" Format="C2" ValidationRules="@(new ValidationRules{ Required=true, Range = new double[]{1, 1000}})" TextAlign="TextAlign.Right"  Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
